<template>
  <div class="goods">
    <el-form :inline="true" :model="listQuery">
      <el-form-item label="">
        <el-input
          style="min-width: 230px"
          v-model="listQuery.name"
          placeholder="输入商品编号/名称/助记码"
          clearable
          size="small"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click.native="handleFilter"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          @click="handleSelection"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini" @click="handleCancel"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
    <el-container>
      <el-aside width="180px">
        <el-tree
          :data="categories"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
          :expand-on-click-node="false"
          node-key="id"
        ></el-tree>
      </el-aside>
      <el-main>
        <el-table
          :data="datas"
          border
          v-loading="listLoading"
          fit
          highlight-current-row
          style="width: 100%"
          size="small"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column
            v-for="column in tableColumns"
            :key="column.key"
            :label="column.title"
            :prop="column.key"
            :align="column.align"
            :width="column.width ? column.width : ''"
          >
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { getGoodsCodes, getCategories } from "@/api/base";

export default {
  name: "GoodsCode",
  props: ["dlgGoodsVisible"],
  data() {
    return {
      tableColumns: [
        {
          key: "code",
          title: "商品编号",
          width: "120",
        },
        {
          key: "name",
          title: "商品名称",
          width: "200",
        },
        {
          key: "cate_name",
          title: "商品分类",
          width: "120",
        },
        {
          key: "unit_name",
          title: "计量单位",
          width: "90",
        },
        {
          key: "specs",
          title: "规格",
          width: "120",
        },
        {
          key: "brand",
          title: "品牌",
          width: "100",
        },
        {
          key: "place",
          title: "产地",
          width: "120",
        },
        {
          key: "purchase_price",
          title: "采购单价",
          width: "100",
        },
        {
          key: "sale_price",
          title: "销售单价",
          width: "100",
        },
        {
          key: "stock_nums",
          title: "库存数量",
          width: "120",
        },
        {
          key: "discount",
          title: "会员折扣率%",
          width: "120",
        },
        {
          key: "supplier_name",
          title: "供应商",
          width: "120",
        },
        {
          key: "remark",
          title: "备注",
          width: "180",
        },
      ],

      title: "选择商品",
      datas: [],
      categories: [],
      selections: [],

      total: 0,
      listLoading: true,

      listQuery: {
        name: "",
        parent_id: null,
        cate_id: null,
        house_id: null,
      },
      //tree
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  computed: {},
  components: {},
  created() {},
  methods: {
    init_data(house_id) {

      this.datas = [];
      this.categories = [];
      this.getCategoryList();
      this.listQuery.house_id = house_id;
      this.getGoodsList();
    },

    handleSelection() {
      this.$emit("update:dlgGoodsVisible", false);
      this.$emit("selections", this.selections);
    },

    handleCancel() {
      this.$emit("update:dlgGoodsVisible", false);
    },

    getCategoryList() {
      getCategories().then((res) => {
        this.categories.push({ id: -1, name: "商品分类", children: res });
      });
    },

    getGoodsList() {
      this.listLoading = true;
      getGoodsCodes(this.listQuery)
        .then((res) => {
          this.datas = res;
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("获取数据失败!" + error);
          this.listLoading = false;
        });
    },
    //树形点击
    handleNodeClick(data) {
      console.log("handleNodeClick: ", data);
      if (data.children) {
        // 父类
        this.listQuery.parent_id = data.id;
        this.listQuery.cate_id = null;
      } else {
        this.listQuery.parent_id = null;
        this.listQuery.cate_id = data.id;
      }

      this.handleFilter();
    },

    // 查询
    handleFilter() {
      this.getGoodsList();
    },

    handleSelectionChange(val) {
      this.selections = val;
      console.log(this.selections);
    },
  },
};
</script>

<style lang='scss'>
.goods {
  .el-aside {
    .el-tree {
      border: 1px solid #eee;
      padding: 10px;
    }
    .el-tree-node__label {
      font-size: 12px;
    }
  }
  .el-form {
    margin-top: -30px;
    .el-form-item {
      margin-bottom: 0px !important;
    }
  }
}
</style>